<template>
	<view>
		<view class="header" :style="{'height': (this.$store.state.statusHeight + 36) + 'px'}">
			<view class="status" :style="{'height': this.$store.state.statusHeight + 'px'}">
			</view>
			<view class="header_info">
				<text class="iconfont icon-fanhui" @click="back" v-if="(showBack)"></text>
				<view class="title">
					{{title}}
				</view>
				<image src="@/static/img/xiaoxi.png" mode="" @click="navtoMessage"></image>
			</view>
		</view>
		<view class="bolck" :style="{'height': (this.$store.state.statusHeight + 36) + 'px'}">
			11
		</view>
	</view>
</template>

<script>
	export default {
		name:"headerBar",
		props: {
			title: {
				required: true,
				default: '首页'
			},
			showBack: {
				required: false,
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
		  navtoMessage() {
			  uni.switchTab({
			  	url: '../message/message',
				error: (err) => {
					console.log(err)
				}
			  })
		  },
		  // 返回上一级
		  back () {
			  uni.navigateBack({
			  	delta: 2
			  })
		  }
		}
	}
</script>

<style lang="scss" scoped>
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	// height: 92rpx;
	z-index: 2000;
	background-color: #FFFFFF;
	border-bottom: 1rpx solid #efefef;
	.header_info {
		width: 100%;
		display: flex;
		height: 36px;
		align-items: center;
		align-content: center;
		.iconfont {
			position: absolute;
			left: 12rpx;
			font-size: 46rpx;
		}
		.title {
			width: 100%;
			font-size: 34rpx;
			font-weight: 600;
			text-align: center;
		}
		image {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			top: 55%;
			right: 4%;
			transform: translate(0%, -50%);
		}
	}
}
.bolck {
	width: 100%;
	display: block;
}
</style>
